import { ChangeEvent } from "react";
import { observer } from "mobx-react";
import todoListStore from "../../store/todoListStore";

function Footer() {
  const { isDoneNum, total } = todoListStore;

  const handleChange = (e: ChangeEvent) => {
    todoListStore.updateAllTodo((e.target as HTMLInputElement).checked);
  };

  const handleDel = () => {
    todoListStore.batchDelTodo();
  };

  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" checked={isDoneNum === total && total !== 0} onChange={handleChange} />
      </label>
      <span>
        <span>已完成 {isDoneNum}</span> / 全部 {total}
      </span>
      <button className="btn btn-danger" style={{ display: isDoneNum ? "block" : "none" }} onClick={handleDel}>
        清除已完成任务
      </button>
    </div>
  );
}

export default observer(Footer);
